<template>
    <canvas ref="pie" :id="Im">
    </canvas>
</template>

<script>
import GM from './index'
export default {
    props: ['Im', 'chartData'],
    data() {
        return {
            chart: null
        }
    },
    methods: {
        initChart() {
            this.$refs.pie.style.width = window.screen.width + 'px'
            let pie = this.$refs.pie
            GM.Global.pixelRatio = 2
            this.chart = new GM.Chart({
                el: pie,
                margin: 20
            })
            let chart = this.chart
            let data = this.chartData
            console.log(data)
            chart.source(data)
            chart.coord('polar', {
                transposed: true,
                inner: 0.6
            })
            // let colorArray = ['#ed0000', '#11c697', '#69cffa', '#ff8040', '#fbc942', '#498bfc']
            let colorArray = ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487']
            // let coArr = (() => {
            //     let tempArray = []
            //     console.log(data.length)
            //     for (let i = 0; i < data.length; i++) {
            //         tempArray[i] = colorArray[i]
            //     }
            //     return tempArray
            // })()
            // console.log(coArr)
            chart.axis(false)
            chart.intervalStack().position('a*b').color('c', function(value) {
                for (let i = 0, len = data.length; i < len; i++) {
                    if (data[i].c === value) {
                        return colorArray[i % 8]
                    }
                }
            })
            chart.render()
        }
    },
    created() {
        setTimeout(() => {
            this.initChart()
        }, 0)
    }
}
</script>

<style>

</style>
